<template>
  <div class="view-image">
    <camera-player
      v-if="playVideo"
      :device-id="camera.deviceId"
      height="100%"
      :type="type"
      @onStop="playVideo = false"
    />
    <div v-else>
      <div v-for="(camera,index) in cameraList" :key="index" style="position: relative;width: 100%;height: 100%">
        <el-image
          fit="fit"
          style="width:100%;height:100%;"
          :src="camera.picturePath"
          @dragstart.prevent
          @dragover.prevent
          @drop.prevent
        />
        <el-button-group style="position: absolute;bottom: 5px;left: 5px">
          <el-button
            type="primary"
            icon="el-icon-picture-outline"
            @click="snap(camera)"
          />
          <el-button
            icon="el-icon-video-camera"
            type="primary"
            @click.stop="hls(camera)"
          />
        </el-button-group>
      </div>
    </div>

    <el-dialog
      append-to-body
      :visible.sync="playVideoWithSetting"
      width="1520px"
      destroy-on-close
      top="5px"
    >
      <el-row :gutter="5" style="width: 100%">
        <el-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10">
          <camera-player
            v-if="playVideoWithSetting"
            height="550px"
            type="video"
            :device-id="camera.deviceId"
          />
        </el-col>
        <el-col :xs="24" :sm="24" :md="14" :lg="14" :xl="14">
          <div class="uni-scroll" style="height: 600px">
            <device-setting :device-core="detail.dataBind.deviceCore" />
          </div>
        </el-col>
      </el-row>
    </el-dialog>

  </div>
</template>

<script>
import BaseView from '../View'
import CameraPlayer from '@/components/CameraPlayer'
import DeviceSetting from '@/components/DeviceSetting'
import { listCameraBind } from '@/api/camera/cameraBindApi'
export default {
  name: 'IotCamera',
  components: {
    CameraPlayer,
    DeviceSetting
  },
  extends: BaseView,
  props: {

  },
  data() {
    return {
      playTypeList: [],
      cameraList: [],
      camera: {},
      playVideo: false,
      playVideoWithSetting: false,
      type: null
    }
  },
  created() {
    this.playTypeList = [{
      value: 'video',
      label: this.$t('video')
    }, {
      value: 'picture',
      label: this.$t('snap')
    }]
    this.listCameraBind()
  },
  methods: {
    listCameraBind() {
      const that = this
      listCameraBind({
        deviceCore: this.detail.dataBind.deviceCore
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          that.cameraList = data
        } else if (code === '201') {
          that.cameraList = []
          that.camera = {}
        }
      })
    },
    historyImg(item) {
      this.device = item
      this.$router.push({
        path: '/camera/img/' + item.deviceId,
        query: { deviceId: item.deviceId, hid: item.deviceCore }
      })
    },
    snap(item) {
      this.device = item
      this.type = 'picture'
      this.playVideo = true
    },
    hls(item) {
      this.device = item
      this.type = 'video'
      this.playVideo = true
    }
  }
}
</script>

<style lang="scss">
  .view-image {
    height: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
